
<template>
  
  <!-- 父向子传值:父组件在子组件身上通过自定义属性传值,子组件内部用defineProps接收值 -->
  <!-- 子向父传值:父组件在子组件身上绑定自定义事件,子组件内部用defineEmits申明emit,然后调用emit触发事件并传值 -->

  <!-- 输入框 -->
  <InputBox @fn="addTask" />
  <!-- 统计 -->
  <Summary :tasklist="tasklist" :unFinishCount="unFinishCount"/>
  <!-- 任务列表 -->
  <Tasklist :tasklist="tasklist" @cs="changeStatus" @dt="deleteTask"/>

</template>

<script setup>
//在Vue3 的setup语法糖中, 导入的组件无需注册即可使用
import InputBox from './components/InputBox.vue'
import Summary from './components/summary.vue'
import Tasklist from './components/Tasklist.vue'

import { RouterLink, RouterView } from 'vue-router'
import { ref,computed} from 'vue'

//定义组件状态
var tasklist = ref([]);

//定义方法
var addTask = (taskName)=>{ //添加一个新任务
  if( taskName.value ){
    var obj = { id:tasklist.value.length + 1,name:taskName.value,status:false }
    tasklist.value.push(obj);
    taskName.value = ''
  }else{
    alert('请输入一个任务名称')
  }
}

var changeStatus = (task)=>{ //更改任务状态
  //查找任务
  var t = tasklist.value.find((item)=>{
    return item.id == task.id;
  })
  if( t ){
    t.status = !t.status;
  }
}

var deleteTask = (task)=>{ //删除一个任务
  //查找任务
  var t = tasklist.value.findIndex((item)=>{
    return item.id == task.id;
  })
  if( t != -1 ){
    tasklist.value.splice(t,1);
  }
}

//定义计算属性
var unFinishCount = computed(()=>{
  var arr = tasklist.value.filter((item)=>{
    return item.status == false
  })
  return arr.length;
})

</script>

<style scoped>
*{
    margin: 0;padding: 0;
}
#app{
    margin: 10px;
}



</style>
